<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
<meta charset="UTF-8" />
<title>【顺风车】</title>
<link rel="stylesheet" href="../../static/assets/css/amazeui.css" th:href="@{/assets/css/amazeui.min.css}" />
<link rel="stylesheet" href="../../static/assets/css/common.min.css" th:href="@{/assets/css/common.min.css}" />
<link rel="stylesheet" href="../../static/assets/css/amaze.min.css" th:href="@{/assets/css/amaze.min.css}" />
<link rel="stylesheet" href="../../static/assets/css/other.min.css" th:href="@{/assets/css/other.min.css}" />
</head>
<body class="register-container">
	<div class="layout">
		<div th:include="common/header::header"></div>

		<br />

		<!--===========layout-container================-->
		<div class="am-container">
			<div class="am-panel am-panel-default">
				<div class="am-panel-bd">
					<div class="am-container">
						<h1 class="am-text-center am-text-middle">
							<span class="am-badge am-badge-secondary am-round am-text-sm">
								<i class="am-icon-map-marker am-primary"></i>
							</span>
							<span th:text="${order.startProvinces}?${order.startProvinces.province}"></span>
							<span th:text="${order.startCities}?${order.startCities.city}"></span>
							--------------------
							<span class="am-badge am-badge-danger am-round am-text-sm">
								<i class="am-icon-map-marker am-primary"></i>
							</span>
							<span th:text="${order.stopProvinces}?${order.stopProvinces.province}"></span>
							<span th:text="${order.stopCities}?${order.stopCities.city}"></span>
						</h1>
					</div>
					<hr />
					<div class="am-g">
						<div class="am-u-md-6">
							<div class="am-g">
								<div class="am-u-md-12">
									<p>
										<span class="am-badge am-badge-secondary am-round am-text-sm">
											<i class="am-icon-map-marker am-primary"></i>
										</span>
										<strong>出发城市：</strong>
										<small th:text="${order.startProvinces}?${order.startProvinces.province}"></small>
										<small th:text="${order.startCities}?${order.startCities.city}"></small>
										<small th:text="${order.startAddress}"></small>
									</p>
								</div>
							</div>
							<div class="am-g">
								<div class="am-u-md-12">
									<p>
										<span class="am-badge am-badge-danger am-round am-text-sm">
											<i class="am-icon-map-marker am-primary"></i>
										</span>
										<strong>出发城市：</strong>
										<small th:text="${order.stopProvinces}?${order.stopProvinces.province}"></small>
										<small th:text="${order.stopCities}?${order.stopCities.city}"></small>
										<small th:text="${order.stopAddress}"></small>
									</p>
								</div>
							</div>
							<div class="am-g">
								<div class="am-u-md-4">
									<p>
										<span class="am-badge am-round am-text-sm">
											<i class="am-icon-map-marker am-primary"></i>
										</span>
										<strong>价格：</strong>
										<small class="am-text-warning">
											<strong th:text="${order.price1}"></strong>
										</small>
										元
									</p>
								</div>
								<div class="am-u-md-5 am-u-end" th:if="${type=='yuding'}">
									<p>
										<span class="am-badge am-round am-text-sm">
											<i class="am-icon-map-marker am-primary"></i>
										</span>
										<strong>剩余座位数：</strong>
										<small class="am-text-success">
											<strong th:text="${order.seatNumber}"></strong>
										</small>
										个
									</p>
								</div>
								<div class="am-u-md-5 am-u-end" th:if="${type=='qiangdan'}">
									<p>
										<span class="am-badge am-round am-text-sm">
											<i class="am-icon-map-marker am-primary"></i>
										</span>
										<strong>乘车人数：</strong>
										<small class="am-text-success">
											<strong th:text="${order.rideNumber}"></strong>
										</small>
										个
									</p>
								</div>
							</div>
							<div class="am-g">
								<div class="am-u-md-12">
									<p>
										<span class="am-badge am-round am-text-sm">
											<i class="am-icon-map-marker am-primary"></i>
										</span>
										<strong>出发时间：</strong>
										<small class="am-text-primary">
											<strong th:text="${order.goDate}+' '+${order.goTime}"></strong>
										</small>
									</p>
								</div>
							</div>
							<div class="am-g">
								<div class="am-u-md-12">
									<p>
										<strong>其它说明：</strong>
										<span th:text="${order.other}"></span>
									</p>
								</div>
							</div>
						</div>

						<div class="am-u-md-6">
							<div id="allmap" style="width: 100%; height: 300px;"></div>
							<p class="am-text-middle am-text-xs" style="display: none;">
								<strong>总距离：</strong>
								<small class="am-text-danger">
									<strong id="distance"></strong>
								</small>
								<strong>，耗时：</strong>
								<small class="am-text-danger">
									<strong id="duration"></strong>
								</small>
							</p>
						</div>
					</div>
					<br />

					<div th:if="${type=='yuding'}">
						<form action="/front/order/reserve/save" th:action="@{/front/order/reserve/save}" method="post">
							<div class="am-g">
								<div class="am-u-md-6 am-u-sm-centered">
									<input type="hidden" name="id" th:value="${order.id}" />
									<button type="submit" class="am-btn am-btn-secondary am-btn-block">预订</button>
								</div>
							</div>
						</form>
					</div>
					<div th:if="${type=='qiangdan'}">
						<form action="/front/order/reserve/save" th:action="@{/front/order/reserve/save}" method="post">
							<div class="am-g">
								<div class="am-u-md-6 am-u-sm-centered">
									<input type="hidden" name="id" th:value="${order.id}" />
									<button type="submit" class="am-btn am-btn-secondary am-btn-block">抢单</button>
								</div>
							</div>
						</form>
					</div>

				</div>
			</div>
		</div>

		<div class="am-container">
			<div class="am-panel am-panel-default">
				<div class="am-panel-hd">评论</div>
				<div class="am-panel-bd">
					<ul class="am-comments-list">
						<li class="am-comment" th:each="comment,s : ${order.comments}">
							<!-- 评论容器 -->
							<a href="">
								<img class="am-comment-avatar" th:src="${comment.user.imageName}" />
								<!-- 评论者头像 -->
							</a>

							<div class="am-comment-main">
								<!-- 评论内容容器 -->
								<header class="am-comment-hd">
									<div class="am-comment-meta">
										<!-- 评论元数据 -->
										<a href="#link-to-user" class="am-comment-author" th:text="${comment.user.realName}"></a>
										<!-- 评论者 -->
										评论于
										<time datetime="" th:text="${comment.commentTime}"></time>
									</div>
								</header>

								<div class="am-comment-bd" th:text="${comment.commentContent}"></div>
								<!-- 评论内容 -->
							</div>
						</li>
					</ul>
					<hr />
					<form class="am-form am-form-horizontal" th:action="@{/front/comment/save}" method="post"
						th:if="${type=='comment'}">
						<input type="hidden" name="orderId" th:value="${order.id}" />
						<div class="am-form-group">
							<label class="am-u-sm-2 am-form-label">评价</label>
							<div class="am-u-sm-10">
								<textarea class="" rows="5" maxlength="100" name="commentContent"></textarea>
							</div>
						</div>
						<div class="am-form-group">
							<div class="am-u-sm-10 am-u-sm-offset-2">
								<button type="submit" class="am-btn am-btn-secondary">提交</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>

	</div>

	<div th:include="common/footer::footer"></div>

	<script src="../../static/assets/js/jquery-2.1.0.js" charset="utf-8" th:src="@{/assets/js/jquery-2.1.0.js}"></script>
	<script src="../../static/assets/js/amazeui.js" charset="utf-8" th:src="@{/assets/js/amazeui.js}"></script>
	<script src="../../static/assets/layer/layer.js" charset="utf-8" th:src="@{/assets/layer/layer.js}"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4" th:src="@{http://api.map.baidu.com/api?v=1.4}"></script>
</body>
<script th:inline="javascript">
	var map = new BMap.Map("allmap");
	map.enableScrollWheelZoom(true);
	var searchComplete = function(results) {
		if (transit.getStatus() != BMAP_STATUS_SUCCESS) {
			return;
		}
		var plan = results.getPlan(0);
		$("#distance").html(plan.getDistance(true));	
		$("#duration").html(plan.getDuration(true));
		$("#allmap").next().show();
	}
	var transit = new BMap.DrivingRoute(map, {
		renderOptions : {
			map : map
		},
		onSearchComplete : searchComplete
	});
	transit.search([[${order.startAddress}]], [[${order.stopAddress}]]);
	
	var r = [[${r}]];
	console.log(r);
	if (r) {
		if (r.code == 0) {
			layer.msg(r.message, {
				icon : 1
			});
		} else {
			layer.msg(r.message, {
				icon : 2
			});
		}
	}
</script>
</html>
